<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title>硅谷少儿英语-填写拼班信息</title>
<meta name="description" content="" />
<meta name="Keywords" content="" />
<link rel="shortcut icon" href="https://www.svenglish.cn/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
<!-- <link rel="stylesheet" href="css/mui.picker.min.css"> -->
<!-- <link rel="stylesheet" href="css/mui.poppicker.css"> -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/order.css">
</head>
<body class="order">
  <div class='header'>
    <a class='logo' href="index.html"><img src='images/logo.png'></a>
  </div>


<div class="group_page" id="orderPage" v-cloak>
  <!-- <div class="form_box"> -->
    <div class='course_top' v-if="!originator">
      <div class="course_top_info"><b>试听课：</b>{{courseTitle}}</div>
      <div class="course_top_info"><b>发起人：</b>{{couresContactName}}</div>
      <div class="course_top_info"><b>发起地点：</b><template v-if="couresLocation === couresAddress">{{couresLocation}}</template><template v-else>{{couresLocation}}({{couresAddress}})</template></div>
      <p>(试听课地点由所有拼班家长协商确定)</p>
    </div>

    <div class='order_list max_list' v-if="originator">
      <div class='order_list_tit'>课程类型 <span class='red'>*</span></div>
      <div class='check_list_all check_list_radio'>
        <ul class="course_list">
          <li v-for="item in courseItems">
            <label>
              <input type="radio" @change="courseChange(item.id)" name="courseItems">
              <span class="radio_icon"><i></i></span>
              {{item.name + item.people}}
              <p>{{item.detail}}</p>
            </label>
          </li>
        </ul>
      </div>
    </div>

  
    <div class='order_list'>
      <div class='order_list_tit'>联系人 <span class='red'>*</span></div>
      <input class='order_input' v-model="name" type='text' maxlength='50'></input>
    </div>

    <div class='order_list'>
      <div class='order_list_tit'>联系电话 <span class='red'>*</span></div>
      <input class='order_input' v-model="mobile" type='text' placeholder='用于拼班时间地点确认' maxlength='11'></input>
    </div>

    <div class='order_list'>
      <div class='order_list_tit'>所在小区 <span class='red'>*</span></div>
      <input class='order_input' @click="locationFocus" v-model="contactLocation" type='text' placeholder='请选择' readonly></input>
    </div>

    <div class="space_tip">最终上课地点由拼班家长协商确定</div>

    <!-- <div class="space_tip">试听课地点通常安排在试听学员家中。<br>后续课程上课地点由拼班家长协商另行确定</div> -->

    <div class="order_list indentNone" v-if="originator">
      <label><input type="checkbox" name="allowOtherJoin" v-model="allowOtherJoin">允许附近的小朋友加入（成班更容易）</label>
    </div>
    <div class='btn' @click='bindPintuan'>提交</div>



  <!-- 地址补全弹窗 -->
  <!--:class="{'show':showSearch}"-->
  <div class="location_search" :class="{'show':showSearch}">
    <iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=5GVBZ-IJXLI-SE6GQ-5RUSL-I2PDF-XVB73&referer=myapp"></iframe>
    <!-- <div class="location_search_input">
      <input class="input" ref="search_input" @keyup="locationKeyUp" v-model="contactLocation" placeholder='您所在的小区名称，如：正大家园' type="text">
    </div>
    <ul class="location_search_list">
      <li v-for="items in locationList" @click="searchListFn(items)">{{items.title}}</li>
    </ul> -->
  </div>


</div>

<!-- 提示框 -->
<div class="modal_bg"></div>
<div class="modal_box">
  <p>请填写联系人</p>
  <div class="modal_footer">
    <div class="modal_btn js_alert_cancel">取消</div>
    <div class="modal_btn green js_alert_ok">确定</div>
  </div>
</div>

<!-- <script src="https://map.qq.com/api/js?v=2.exp&key=5GVBZ-IJXLI-SE6GQ-5RUSL-I2PDF-XVB73"></script> -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/vue.min.js"></script>

<!-- 城市下拉 -->

<script src="js/common.js"></script>
<script src="js/order.js"></script>

<script>
  // 城市下拉
  // var picker = new mui.PopPicker({
  //   layer: 2
  // });
  // picker.setData(cityData);
  // // picker.pickers[0].setSelectedIndex(0);
  // // picker.pickers[1].setSelectedIndex(0);
  // picker.show(function(SelectedItem) {
  //   console.log(SelectedItem);
  // })
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133564697-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-133564697-1');
</script>
</body>
</html>
